<div class="modal-dialog modal-lg" role="document" id="saveConfirmationDialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-bind="click: cancel" aria-hidden="true">
                <i class="icon-cancel"></i>
            </button>
            <div class="padding padding-sm">
                <div class="bg-warning text-warning padding padding-sm margin-top flex-horizontal">
                    <i class="icon-warning flex-start padding padding-sm" id="warning-icon"></i>
                    <div class="padding padding-sm">
                        <h4>Note:</h4>
                        <span>
                            After saving, the database must be reloaded in order for these configuration changes to be in effect.<br>
                            Without reloading the database, the changes will NOT apply (despite being written to the database record).
                        </span>
                        <hr> 
                        <div class="margin-top" data-bind="html: howToReloadDatabaseHtml"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-body">
            <div class="padding padding-sm">
                <h4 class="modal-title">The following database settings will be saved:</h4>
                <div class="panel">
                    <pre><code class="white-space-pre" data-bind="html: settingsToSaveText"></code></pre>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div class="padding">
                <button type="button" class="btn btn-default" data-bind="click: cancel">
                    <i class="icon-cancel"></i><span>Cancel</span>
                </button>
                <button type="button" class="btn btn-danger" data-bind="click: save">
                    <i class="icon-save"></i><span>Save</span>
                </button>
            </div>
        </div>
    </div>
</div>
